<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>券商设置</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        //加载table模块
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;

            table.render({
                elem: '#myTable'
                , height: 312,
                id: 'tableId'
                , url: 'selectBroker' //数据接口
                , toolbar: '#Broker'
                , page: true //开启分页
                , height:'full-20'
                , limits: [2, 4, 6, 8]
                , cols: [[ //表头
                    {field: 'brokerId', title: '券商编号', sort: true, fixed: 'left'}
                    , {field: 'brokerName', title: '券商名称'}
                    , {field: 'brokerDesc', title: '券商说明', sort: true}
                    , {field: 'brokerIntroduce', title: '券商备注'}
                    , {field: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
                ]]
            });

            table.on('toolbar(myTable2)', function (obj) {
                //根据事件对象 来判定点击的是哪一个案例
                if (obj.event == 'search') {
                    var brokerName = $("#brokerName").val();
                    table.reload('tableId', {
                        method: 'post'
                        , where: {
                            'brokerName': brokerName,
                        }
                        , page: {
                            curr: 1
                        }
                    });
                }
                if (obj.event == 'insert') {
                    //点击按钮的时候，弹出一个添加页面
                    layer.open({
                        type: 2,
                        title: "添加券商",
                        content: "addbroker",
                        area: ['350px', '300px'],
                        //层销毁后触发
                        end: function () {
                            //刷新页面
                            table.reload('tableId');
                        }
                    })
                }
            });

            table.on('tool(myTable2)', function (obj) {
                switch (obj.event) {
                    case "edit":
                        layer.open({
                            type: 2,
                            title: "修改券商",
                            content: "updatebroker",
                            area: ['350px', '350px'],
                            //层销毁后触发
                            end: function () {
                                //刷新页面
                                table.reload('tableId');
                            },
                            success: function (layero, index) {
                                //将数据发送到addBroker.html
                                var body = layer.getChildFrame('body', index);
                                body.find("#brokerId").val(obj.data.brokerId);
                                body.find("#brokerName").val(obj.data.brokerName);
                                body.find("#brokerDesc").val(obj.data.brokerDesc);
                                body.find("#brokerIntroduce").val(obj.data.brokerIntroduce);
                            }
                        })
                        break;
                    case "del":
                        layer.confirm('您确定要删除吗', function (index) {
                            layer.close(index);
                            var data = obj.data;
                            $.post(
                            'deleteBroker'
                            ,data
                            ,function(){
                                table.reload('tableId');
                            })
                        })
                        break;
                }
            })
        })
    </script>
</head>
<body>
<!--表格上方的 工具条-->
<script type="text/html" id="Broker">
    <div style="float:right">
        <button class="layui-btn layui-btn-sm" lay-event="insert" id="addbroker"><i
                class="layui-icon">&#xe654;</i>新增
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
    </div>

    <form class="layui-form layui-col-space5">
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label" style="width: 110px; text-align: center">券商名称</label>
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" placeholder="请输入券商名称" name="brokerName" style="width: 250px" id="brokerName">
            </div>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn layui-btn-primary" lay-event="search" lay-submit="search" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>
    </form>
    <!--表格最后一列的操作按钮的工具栏-->
    <div style="display: none;" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i
                class="layui-icon">&#xe642;</i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                class="layui-icon">&#xe640;</i>删除</a>
    </div>
</script>
    <table id="myTable" lay-filter="myTable2"></table>

</body>
</html>